// =====================================================================
// Runs when TabStrip page is first loaded
// =====================================================================
function initializeTabStripPage()
{
	// Private vars
	divHeight = 0;
	divWidth = 0;
	maxDivWidth = 0;
	maxDivHeight = 0;
	tabButtonTotWidth = 3;

	// ----------------------------------------------------------
	// TabStrip repaint needs border-collapse in IE only
	htmlTable = document.getElementById("tabsTable");
	browserName = navigator.appName.toUpperCase();
	if (browserName.substring(0, 9) == "MICROSOFT")
		htmlTable.style.borderCollapse = "collapse";

	// Make the Tabstrip tab body visible
	tabbody = document.getElementById("tabBody");
	tabbody.style.visibility = 'visible';

	// Set numTabs and TabBody colSpan
    tabtops = document.getElementById("tabTops");
    tdCount = tabtops.getElementsByTagName("td").length;
	numTabs = tdCount / 2;
    tabbody.colSpan = tdCount + 1; 
    
	// ----------------------------------------------------------		
	// Position the <DIV>s that contain the Tab controls
	for (var i=1; i<=numTabs; i++)
	{			
		// Set properties of the <DIV> that contain the Tab controls
		tab = document.getElementById("tab" + i);
		tab.style.position = "absolute";
		tab.style.visibility = 'hidden';
		
		// ** NOTE - Comment this line out to see the <div> on the Tab
		tab.style.borderWidth = 0;

		// Position the <DIV> on the Tab <TABLE>
		tab.style.top = (document.getElementById("tabsTable").offsetTop + 38) + "px";
		tab.style.left = 18 + "px";

		// Set maximum <DIV> height if its tallest
		divHeight = parseInt(tab.style.height);
		if (divHeight > maxDivHeight)
			maxDivHeight = divHeight;				
		
		// Set maximum <DIV> width if its widest
		divWidth = parseInt(tab.style.width);			
		if (divWidth > maxDivWidth)
			maxDivWidth = divWidth;
		
		// Add to total width of all Tab buttons
		tabButton = document.getElementById(i);
		tabButtonTotWidth += parseInt(tabButton.style.width) + 16;
	}
	
	// Set tab body height and tab button right filler width
    tabbody.style.height = (maxDivHeight + 18) + "px";
	tabbuttons = document.getElementById("tabButtons");	
	rightfiller = tabbuttons.getElementsByTagName("td")[tdCount];
	rightfiller.style.width = (maxDivWidth - tabButtonTotWidth) + "px";
        
	// Show the controls on the last Tab selected by the user
	prevTabNum = document.getElementById("hidCurrentTab").value;
	showTab(prevTabNum);
}

// ========================================================================
// TabStrip changing function - Uses seperate page <DIV>ision for each Tab 
// ========================================================================
function showTab(tabNum)
{
	// Hide last selected Tab <DIV> and show current <DIV>
	prevTabNum = document.getElementById("hidCurrentTab").value;
	document.getElementById("tab" + prevTabNum).style.visibility = 'hidden';
	document.getElementById("tab" + tabNum).style.visibility = 'visible';

	// Put currently selected Tab number (to be shown) in hidden textbox
	document.getElementById("hidCurrentTab").value = tabNum;

	// ------------------------------------------------------
	// Make the last selected Tab button label "jump back"
	prevTab = document.getElementById(prevTabNum);
	prevTab.style.borderWidth = "1px";
	prevTab.style.borderBottomWidth = "2px";
	prevTab.style.borderColor = '#ffffff';
	prevTab.style.borderRightColor = '#000000';
	prevTab.style.paddingTop = "5px";
	document.getElementById("tabtop" + prevTabNum).style.borderWidth = "0px";	

	// ------------------------------------------------------
	// Make the currently selected Tab button label "jump forward"
	currTab = document.getElementById(tabNum);
	currTab.style.borderWidth = "2px";	
	currTab.style.borderTopWidth = "0px";	
	currTab.style.borderColor = '#ffffff';
	currTab.style.borderRightColor = '#000000';
	currTab.style.borderBottomColor = '#d4d0c8';
	currTab.style.paddingTop = "0px";

	tabTop = document.getElementById("tabtop" + tabNum);
	tabTop.style.borderWidth = "2px";	
	tabTop.style.borderBottomWidth = "0px";
	tabTop.style.borderColor = '#ffffff';
	tabTop.style.borderRightColor = '#000000';
	tabTop.style.borderBottomColor = '#d4d0c8';
	
	// ------------------------------------------------------
	// Show or hide the left hand Tab button filler <TD> 
	leftfiller = document.getElementById("leftFiller");
	if (tabNum == 1)
	{
		// Tab 1 selected - So merge left filler with Tab1
		document.getElementById(1).style.borderLeftWidth = "0px";
		leftfiller.style.borderWidth = "2px";
		leftfiller.style.borderRightWidth = "0px";
		leftfiller.style.borderTopWidth = "0px";
		leftfiller.style.borderBottomColor = '#d4d0c8';
	}
	else
	{
		// Tab 1 NOT selected - So HIDE left filler border
		leftfiller.style.borderWidth = "0px";
		leftfiller.style.borderBottomWidth = "2px";
		leftfiller.style.borderBottomColor = '#ffffff';
	}
}